import Taro, { Component } from '@tarojs/taro';
import { View, ScrollView, Image, Text } from '@tarojs/components';
import { DNavBar, DTabs, DItemError } from '@/components';
import { AtSearchBar } from 'taro-ui'
import './index.scss';
import http from '@/api'

export default class MortgageCheck extends Component {
  state = {
    titleIcon: require('@/assets/images/mortgage.png'),
    rightArrowIcon: require('@/assets/images/right_arrow_icon.png'),
    tabs: [{
      name: '审核中',
      value: 0
    }, {
      name: '已处理',
      value: 9
    }],
    list: [],
    tabIndex: 0,
    form: {
      page: 1,
      pageSize: 10
    },
    totalPage: 0,
    searchVal: ''
  }

  componentDidShow() {
    this.getMortgageList()
  }
  onScrollToLower = () => {
    this.setState({ form: {
      ...this.state.form,
      page: this.state.form.page + 1
    }}, () => {
      this.getMortgageList()
    })
  }
  getMortgageList() {
    let { form, tabIndex: status } = this.state

    if (form.page != 1 && form.page > this.state.totalPage) return

    http.getMortgageList({ ...form, status })
      .then(({ list, totalPage }) => {
        if (form.page === 1) {
          this.setState({ list, totalPage })
        } else {
          this.setState({ list: [...this.state.list, ...list], totalPage })
        }
      })
  }
  handleTabClick = (index) => {
    let { form } =  this.state
    form.page = 1

    this.setState({ tabIndex: index, list: [], form }, this.getMortgageList)
  }
  handleItemClick = (id) => {
    Taro.navigateTo({ url: '/pages/mortgageCheck/detail?id=' + id })
  }
  computedTagClass = (status) => {
    return {
      1: 'pass',
      2: 'no-pass',
      3: 'gray'
    }[status]
  }
  computedStatusText = (status) => {
    return {
      1: '审核通过',
      2: '审核不通过',
      3: '已取消'
    }[status]
  }
  searchValChange = (val) => {
    this.setState({ searchVal: val.trim() })
  }
  onClear = () => {
    let form = this.state.form
    form.content = ''
    this.setState({ searchVal: '', form })
  }
  onActionClick = () => {
    this.setState({
      form: {
        ...this.state.form,
        page: 1,
        content: this.state.searchVal
      }
    }, this.getMortgageList)
  }

  render() {
    const { tabs, list, tabIndex, titleIcon, rightArrowIcon, searchVal  } = this.state;

    return (
      <View className="mortgage-check">
        <DNavBar title="按揭信息审核"></DNavBar>

        <AtSearchBar value={searchVal}
                     maxLength={80}
                     onChange={this.searchValChange}
                     onActionClick={this.onActionClick}
                     onClear={this.onClear} />

        <DTabs tabs={tabs} index={tabIndex} onClick={this.handleTabClick} />

        <ScrollView scrollY className="mortgage-check__body" onScrollToLower={this.onScrollToLower}>
          {
            list.map(item => (
              <View className="list-item list-item--style" onClick={() => this.handleItemClick(item.id)}>
                <View className="list-item__title">
                  <Image src={titleIcon} className="list-item__title__icon"></Image>
                  <Text className="list-item__title__text">{item.entName}</Text>
                  {
                    tabIndex === 9 && <View className={['list-item__title__tag', this.computedTagClass(item.status)].join(' ')}>
                      <Text>{this.computedStatusText(item.status)}</Text>
                    </View>
                  }
                </View>
                <View className="list-item__info">
                  <View className="list-item__info__text">{item.cusName} · {item.signBank}</View>
                  <View className="list-item__info__time">{item.createTime}</View>
                </View>

                { tabIndex === 0 && <Image src={rightArrowIcon} className="list-item__arrow"></Image> }
              </View>
            ))
          }
          {
            list.length === 0 && <DItemError type={searchVal ? 2 : 1}></DItemError>
          }
        </ScrollView>
      </View>
    )
  }
}